<div class="container">
  <div class="page-header">
    <h1 class="page-title">
      Dashboard
    </h1>
  </div>
  <div class="row row-cards">
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-green">
            6%
            <i class="fe fe-chevron-up"></i>
          </div>
          <div class="h1 m-0">43</div>
          <div class="text-muted mb-4">New Tickets</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -3%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0">17</div>
          <div class="text-muted mb-4">Closed Today</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-green">
            9%
            <i class="fe fe-chevron-up"></i>
          </div>
          <div class="h1 m-0">7</div>
          <div class="text-muted mb-4">New Replies</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-green">
            3%
            <i class="fe fe-chevron-up"></i>
          </div>
          <div class="h1 m-0">27.3K</div>
          <div class="text-muted mb-4">Followers</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -2%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0">$95</div>
          <div class="text-muted mb-4">Daily Earnings</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0">621</div>
          <div class="text-muted mb-4">Products</div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Development Activity</h3>
        </div>
        <div id="chart-development-activity" style="height: 10rem; max-height: 160px; position: relative;" class="c3"><svg width="574" height="160" style="overflow: hidden;"><defs><clipPath id="c3-1539219423714-clip"><rect width="575" height="148"></rect></clipPath><clipPath id="c3-1539219423714-clip-xaxis"><rect x="-31" y="-20" width="637" height="28"></rect></clipPath><clipPath id="c3-1539219423714-clip-yaxis"><rect x="-29" y="-4" width="19" height="172"></rect></clipPath><clipPath id="c3-1539219423714-clip-grid"><rect width="575" height="148"></rect></clipPath><clipPath id="c3-1539219423714-clip-subchart"><rect width="575"></rect></clipPath></defs><g transform="translate(-0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="287.5" y="74" style="opacity: 0;"></text><rect class="c3-zoom-rect" width="575" height="148" style="opacity: 0;"></rect><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip)" class="c3-regions" style="visibility: visible;"></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip-grid)" class="c3-grid" style="visibility: visible;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="148" style="visibility: hidden;"></line></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip)" class="c3-chart"><g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"><rect class=" c3-event-rect c3-event-rect-0" x="-11.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-1" x="12.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-2" x="36.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-3" x="60.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-4" x="84.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-5" x="108.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-6" x="132.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-7" x="156.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-8" x="180.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-9" x="204.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-10" x="228.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-11" x="252.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-12" x="276.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-13" x="300.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-14" x="324.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-15" x="348.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-16" x="372.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-17" x="396.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-18" x="420.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-19" x="444.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-20" x="468.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-21" x="492.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-22" x="516.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-23" x="540.5" y="0" width="23" height="148"></rect><rect class=" c3-event-rect c3-event-rect-24" x="563.5" y="0" width="23" height="148"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-data1" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1"><path class=" c3-shape c3-shape c3-line c3-line-data1" d="M0,148L24,137.72027972027973L48,145.94405594405598L72,143.88811188811187L96,133.60839160839163L120,137.72027972027973L144,135.66433566433565L168,131.55244755244755L192,98.65734265734267L216,133.60839160839163L240,123.32867132867133L264,137.72027972027973L288,135.66433566433565L312,141.83216783216784L336,143.88811188811187L360,143.88811188811187L384,135.66433566433565L408,86.32167832167832L432,127.44055944055943L456,127.44055944055943L480,117.16083916083916L504,119.21678321678321L528,51.37062937062938L552,14.363636363636367L575,34.92307692307691" style="stroke: rgb(70, 127, 207); opacity: 1;"></path></g><g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1"><path class=" c3-shape c3-shape c3-area c3-area-data1" d="M0,148L24,137.72027972027973L48,145.94405594405598L72,143.88811188811187L96,133.60839160839163L120,137.72027972027973L144,135.66433566433565L168,131.55244755244755L192,98.65734265734267L216,133.60839160839163L240,123.32867132867133L264,137.72027972027973L288,135.66433566433565L312,141.83216783216784L336,143.88811188811187L360,143.88811188811187L384,135.66433566433565L408,86.32167832167832L432,127.44055944055943L456,127.44055944055943L480,117.16083916083916L504,119.21678321678321L528,51.37062937062938L552,14.363636363636367L575,34.92307692307691L575,148L552,148L528,148L504,148L480,148L456,148L432,148L408,148L384,148L360,148L336,148L312,148L288,148L264,148L240,148L216,148L192,148L168,148L144,148L120,148L96,148L72,148L48,148L24,148L0,148Z" style="fill: rgb(70, 127, 207); opacity: 0.1;"></path></g><g class=" c3-selected-circles c3-selected-circles-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1" style="cursor: pointer;"><circle class=" c3-shape c3-shape-0 c3-circle c3-circle-0" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="0" cy="148"></circle><circle class=" c3-shape c3-shape-1 c3-circle c3-circle-1" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="24" cy="137.72027972027973"></circle><circle class=" c3-shape c3-shape-2 c3-circle c3-circle-2" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="48" cy="145.94405594405598"></circle><circle class=" c3-shape c3-shape-3 c3-circle c3-circle-3" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="72" cy="143.88811188811187"></circle><circle class=" c3-shape c3-shape-4 c3-circle c3-circle-4" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="96" cy="133.60839160839163"></circle><circle class=" c3-shape c3-shape-5 c3-circle c3-circle-5" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="120" cy="137.72027972027973"></circle><circle class=" c3-shape c3-shape-6 c3-circle c3-circle-6" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="144" cy="135.66433566433565"></circle><circle class=" c3-shape c3-shape-7 c3-circle c3-circle-7" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="168" cy="131.55244755244755"></circle><circle class=" c3-shape c3-shape-8 c3-circle c3-circle-8" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="192" cy="98.65734265734267"></circle><circle class=" c3-shape c3-shape-9 c3-circle c3-circle-9" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="216" cy="133.60839160839163"></circle><circle class=" c3-shape c3-shape-10 c3-circle c3-circle-10" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="240" cy="123.32867132867133"></circle><circle class=" c3-shape c3-shape-11 c3-circle c3-circle-11" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="264" cy="137.72027972027973"></circle><circle class=" c3-shape c3-shape-12 c3-circle c3-circle-12" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="288" cy="135.66433566433565"></circle><circle class=" c3-shape c3-shape-13 c3-circle c3-circle-13" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="312" cy="141.83216783216784"></circle><circle class=" c3-shape c3-shape-14 c3-circle c3-circle-14" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="336" cy="143.88811188811187"></circle><circle class=" c3-shape c3-shape-15 c3-circle c3-circle-15" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="360" cy="143.88811188811187"></circle><circle class=" c3-shape c3-shape-16 c3-circle c3-circle-16" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="384" cy="135.66433566433565"></circle><circle class=" c3-shape c3-shape-17 c3-circle c3-circle-17" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="408" cy="86.32167832167832"></circle><circle class=" c3-shape c3-shape-18 c3-circle c3-circle-18" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="432" cy="127.44055944055943"></circle><circle class=" c3-shape c3-shape-19 c3-circle c3-circle-19" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="456" cy="127.44055944055943"></circle><circle class=" c3-shape c3-shape-20 c3-circle c3-circle-20" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="480" cy="117.16083916083916"></circle><circle class=" c3-shape c3-shape-21 c3-circle c3-circle-21" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="504" cy="119.21678321678321"></circle><circle class=" c3-shape c3-shape-22 c3-circle c3-circle-22" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="528" cy="51.37062937062938"></circle><circle class=" c3-shape c3-shape-23 c3-circle c3-circle-23" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="552" cy="14.363636363636367"></circle><circle class=" c3-shape c3-shape-24 c3-circle c3-circle-24" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="575" cy="34.92307692307691"></circle></g></g></g><g class="c3-chart-arcs" transform="translate(287.5,69)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data1"></g></g></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip-xaxis)" transform="translate(0,148)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-x-label" transform="" style="text-anchor: end;" x="575" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(24, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(48, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(72, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(96, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(120, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(144, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><g class="tick" transform="translate(168, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">7</tspan></text></g><g class="tick" transform="translate(192, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">8</tspan></text></g><g class="tick" transform="translate(216, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">9</tspan></text></g><g class="tick" transform="translate(240, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">10</tspan></text></g><g class="tick" transform="translate(264, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">11</tspan></text></g><g class="tick" transform="translate(288, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">12</tspan></text></g><g class="tick" transform="translate(312, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">13</tspan></text></g><g class="tick" transform="translate(336, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">14</tspan></text></g><g class="tick" transform="translate(360, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">15</tspan></text></g><g class="tick" transform="translate(384, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">16</tspan></text></g><g class="tick" transform="translate(408, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">17</tspan></text></g><g class="tick" transform="translate(432, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">18</tspan></text></g><g class="tick" transform="translate(456, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">19</tspan></text></g><g class="tick" transform="translate(480, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">20</tspan></text></g><g class="tick" transform="translate(504, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">21</tspan></text></g><g class="tick" transform="translate(528, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">22</tspan></text></g><g class="tick" transform="translate(552, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">23</tspan></text></g><g class="tick" transform="translate(575, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">24</tspan></text></g><path class="domain" d="M0,6V0H575V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip-yaxis)" transform="translate(0,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="1.2em"></text><g class="tick" transform="translate(0,148)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,128)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,107)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,87)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,66)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">40</tspan></text></g><g class="tick" transform="translate(0,46)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">50</tspan></text></g><g class="tick" transform="translate(0,25)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">60</tspan></text></g><g class="tick" transform="translate(0,5)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">70</tspan></text></g><path class="domain" d="M0,1H0V148H0"></path></g><g class="c3-axis c3-axis-y2" transform="translate(575,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y2-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0,148)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,134)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,119)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,104)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,90)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,75)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,60)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,46)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,31)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,16)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V148H6"></path></g></g><g transform="translate(-0.5,160.5)" style="visibility: hidden;"><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><rect class="background" x="0" width="575" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423714-clip-xaxis)" style="visibility: hidden; opacity: 1;"><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(24, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(48, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(72, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(96, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(120, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(144, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><g class="tick" transform="translate(168, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">7</tspan></text></g><g class="tick" transform="translate(192, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">8</tspan></text></g><g class="tick" transform="translate(216, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">9</tspan></text></g><g class="tick" transform="translate(240, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">10</tspan></text></g><g class="tick" transform="translate(264, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">11</tspan></text></g><g class="tick" transform="translate(288, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">12</tspan></text></g><g class="tick" transform="translate(312, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">13</tspan></text></g><g class="tick" transform="translate(336, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">14</tspan></text></g><g class="tick" transform="translate(360, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">15</tspan></text></g><g class="tick" transform="translate(384, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">16</tspan></text></g><g class="tick" transform="translate(408, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">17</tspan></text></g><g class="tick" transform="translate(432, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">18</tspan></text></g><g class="tick" transform="translate(456, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">19</tspan></text></g><g class="tick" transform="translate(480, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">20</tspan></text></g><g class="tick" transform="translate(504, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">21</tspan></text></g><g class="tick" transform="translate(528, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">22</tspan></text></g><g class="tick" transform="translate(552, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: none;"><tspan x="0" dy=".71em" dx="0">23</tspan></text></g><g class="tick" transform="translate(575, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">24</tspan></text></g><path class="domain" d="M0,6V0H575V6"></path></g></g><g transform="translate(19.5,13.5)"><g class="c3-legend-background"><rect height="230" width="94.984375"></rect></g><g class="c3-legend-item c3-legend-item-data1" style="visibility: visible; cursor: pointer;"><text x="24" y="19" style="pointer-events: none;">Purchases</text><rect class="c3-legend-item-event" x="10" y="5" width="84.984375" height="22" style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="8" y1="14" x2="18" y2="14" stroke-width="10" style="stroke: rgb(70, 127, 207); pointer-events: none;"></line></g></g><text class="c3-title" x="287" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div></div>
        <div class="table-responsive">
          <table class="table card-table table-striped table-vcenter">
            <thead>
              <tr>
                <th colspan="2">User</th>
                <th>Commit</th>
                <th>Date</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="w-1"><span class="avatar"></span></td>
                <td>Ronald Bradley</td>
                <td>Initial commit</td>
                <td class="text-nowrap">May 6, 2018</td>
                <td class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
              </tr>
              <tr>
                <td><span class="avatar">BM</span></td>
                <td>Russell Gibson</td>
                <td>Main structure</td>
                <td class="text-nowrap">April 22, 2018</td>
                <td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
              </tr>
              <tr>
                <td><span class="avatar"></span></td>
                <td>Beverly Armstrong</td>
                <td>Left sidebar adjustments</td>
                <td class="text-nowrap">April 15, 2018</td>
                <td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
              </tr>
              <tr>
                <td><span class="avatar"></span></td>
                <td>Bobby Knight</td>
                <td>Topbar dropdown style</td>
                <td class="text-nowrap">April 8, 2018</td>
                <td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
              </tr>
              <tr>
                <td><span class="avatar"></span></td>
                <td>Sharon Wells</td>
                <td>Fixes #625</td>
                <td class="text-nowrap">April 9, 2018</td>
                <td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <script>
        require(['c3', 'jquery'], function(c3, $) {
          $(document).ready(function(){
            var chart = c3.generate({
              bindto: '#chart-development-activity', // id of chart wrapper
              data: {
                columns: [
                    // each columns data
                  ['data1', 0, 5, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 6, 30, 10, 10, 15, 14, 47, 65, 55]
                ],
                type: 'area', // default type of chart
                groups: [
                  [ 'data1', 'data2', 'data3']
                ],
                colors: {
                  'data1': tabler.colors["blue"]
                },
                names: {
                    // name of each serie
                  'data1': 'Purchases'
                }
              },
              axis: {
                y: {
                  padding: {
                    bottom: 0,
                  },
                  show: false,
                    tick: {
                    outer: false
                  }
                },
                x: {
                  padding: {
                    left: 0,
                    right: 0
                  },
                  show: false
                }
              },
              legend: {
                position: 'inset',
                padding: 0,
                inset: {
                            anchor: 'top-left',
                  x: 20,
                  y: 8,
                  step: 10
                }
              },
              tooltip: {
                format: {
                  title: function (x) {
                    return '';
                  }
                }
              },
              padding: {
                bottom: 0,
                left: -1,
                right: -1
              },
              point: {
                show: false
              }
            });
          });
        });
      </script>
    </div>
    <div class="col-md-6">
      <div class="alert alert-primary">Are you in trouble? <a href="./docs/index.html" class="alert-link">Read our documentation</a> with code samples.</div>
      <div class="row">
        <div class="col-sm-6">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Chart title</h3>
            </div>
            <div class="card-body">
              <div id="chart-donut" style="height: 12rem; max-height: 192px; position: relative;" class="c3"><svg width="226" height="192" style="overflow: hidden;"><defs><clipPath id="c3-1539219423840-clip"><rect width="226" height="188"></rect></clipPath><clipPath id="c3-1539219423840-clip-xaxis"><rect x="-31" y="-20" width="288" height="20"></rect></clipPath><clipPath id="c3-1539219423840-clip-yaxis"><rect x="-29" y="-4" width="20" height="212"></rect></clipPath><clipPath id="c3-1539219423840-clip-grid"><rect width="226" height="188"></rect></clipPath><clipPath id="c3-1539219423840-clip-subchart"><rect width="226"></rect></clipPath></defs><g transform="translate(0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="113" y="94" style="opacity: 0;"></text><rect class="c3-zoom-rect" width="226" height="188" style="opacity: 0;"></rect><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip)" class="c3-regions" style="visibility: hidden;"></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip-grid)" class="c3-grid" style="visibility: hidden;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="188" style="visibility: hidden;"></line></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip)" class="c3-chart"><g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"><rect class=" c3-event-rect c3-event-rect-0" x="0" y="0" width="226" height="188"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-data1" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-data2" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data2 c3-bars c3-bars-data2" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1"></g><g class=" c3-selected-circles c3-selected-circles-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-data2" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data2 c3-lines c3-lines-data2"></g><g class=" c3-shapes c3-shapes-data2 c3-areas c3-areas-data2"></g><g class=" c3-selected-circles c3-selected-circles-data2"></g><g class=" c3-shapes c3-shapes-data2 c3-circles c3-circles-data2" style="cursor: pointer;"></g></g></g><g class="c3-chart-arcs" transform="translate(113,89)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 1;"></text><g class="c3-chart-arc c3-target c3-target-data1"><g class=" c3-shapes c3-shapes-data1 c3-arcs c3-arcs-data1"><path class=" c3-shape c3-shape c3-arc c3-arc-data1" transform="" style="fill: rgb(94, 186, 0); cursor: pointer;" d="M5.177194343395436e-15,-84.55A84.55,84.55 0 1,1 -61.63429744848035,57.87845780627061L-36.980578469088215,34.72707468376237A50.73,50.73 0 1,0 3.106316606037261e-15,-50.73Z"></path></g><text dy=".35em" class="" transform="translate(58.13631395723388,25.157829567123475)" style="opacity: 1; text-anchor: middle; pointer-events: none;">63.0%</text></g><g class="c3-chart-arc c3-target c3-target-data2"><g class=" c3-shapes c3-shapes-data2 c3-arcs c3-arcs-data2"><path class=" c3-shape c3-shape c3-arc c3-arc-data2" transform="" style="fill: rgb(142, 207, 77); cursor: pointer;" d="M-61.63429744848035,57.87845780627061A84.55,84.55 0 0,1 -1.5531583030186305e-14,-84.55L-9.318949818111782e-15,-50.73A50.73,50.73 0 0,0 -36.980578469088215,34.72707468376237Z"></path></g><text dy=".35em" class="" transform="translate(-58.13631395723389,-25.157829567123482)" style="opacity: 1; text-anchor: middle; pointer-events: none;">37.0%</text></g></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data1"></g></g><g class="c3-chart-text c3-target c3-target-data2" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data2"></g></g></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip-xaxis)" transform="translate(0,188)" style="visibility: visible; opacity: 0;"><text class="c3-axis-x-label" transform="" style="text-anchor: end;" x="226" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(113, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H226V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip-yaxis)" transform="translate(0,0)" style="visibility: visible; opacity: 0;"><text class="c3-axis-y-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="1.2em"></text><g class="tick" transform="translate(0,185)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">35</tspan></text></g><g class="tick" transform="translate(0,155)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">40</tspan></text></g><g class="tick" transform="translate(0,125)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">45</tspan></text></g><g class="tick" transform="translate(0,95)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">50</tspan></text></g><g class="tick" transform="translate(0,65)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">55</tspan></text></g><g class="tick" transform="translate(0,35)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">60</tspan></text></g><g class="tick" transform="translate(0,5)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">65</tspan></text></g><path class="domain" d="M-6,1H0V188H-6"></path></g><g class="c3-axis c3-axis-y2" transform="translate(226,0)" style="visibility: hidden; opacity: 0;"><text class="c3-axis-y2-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0,188)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,170)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,151)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,132)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,114)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,95)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,76)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,58)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,39)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,20)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V188H6"></path></g></g><g transform="translate(0.5,192.5)" style="visibility: hidden;"><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><rect class="background" x="0" width="226" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423840-clip-xaxis)" style="visibility: hidden; opacity: 0;"><g class="tick" transform="translate(113, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H226V6"></path></g></g><g transform="translate(0,192)" style="visibility: hidden;"></g><text class="c3-title" x="113" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div></div>
            </div>
          </div>
          <script>
            require(['c3', 'jquery'], function(c3, $) {
              $(document).ready(function(){
                var chart = c3.generate({
                  bindto: '#chart-donut', // id of chart wrapper
                  data: {
                    columns: [
                        // each columns data
                      ['data1', 63],
                      ['data2', 37]
                    ],
                    type: 'donut', // default type of chart
                    colors: {
                      'data1': tabler.colors["green"],
                      'data2': tabler.colors["green-light"]
                    },
                    names: {
                        // name of each serie
                      'data1': 'Maximum',
                      'data2': 'Minimum'
                    }
                  },
                  axis: {
                  },
                  legend: {
                            show: false, //hide legend
                  },
                  padding: {
                    bottom: 0,
                    top: 0
                  },
                });
              });
            });
          </script>
        </div>
        <div class="col-sm-6">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Chart title</h3>
            </div>
            <div class="card-body">
              <div id="chart-pie" style="height: 12rem; max-height: 192px; position: relative;" class="c3"><svg width="226" height="192" style="overflow: hidden;"><defs><clipPath id="c3-1539219423896-clip"><rect width="226" height="188"></rect></clipPath><clipPath id="c3-1539219423896-clip-xaxis"><rect x="-31" y="-20" width="288" height="20"></rect></clipPath><clipPath id="c3-1539219423896-clip-yaxis"><rect x="-29" y="-4" width="20" height="212"></rect></clipPath><clipPath id="c3-1539219423896-clip-grid"><rect width="226" height="188"></rect></clipPath><clipPath id="c3-1539219423896-clip-subchart"><rect width="226"></rect></clipPath></defs><g transform="translate(0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="113" y="94" style="opacity: 0;"></text><rect class="c3-zoom-rect" width="226" height="188" style="opacity: 0;"></rect><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip)" class="c3-regions" style="visibility: hidden;"></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip-grid)" class="c3-grid" style="visibility: hidden;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="188" style="visibility: hidden;"></line></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip)" class="c3-chart"><g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"><rect class=" c3-event-rect c3-event-rect-0" x="0" y="0" width="226" height="188"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-data1" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-data2" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data2 c3-bars c3-bars-data2" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-data3" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data3 c3-bars c3-bars-data3" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-data4" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data4 c3-bars c3-bars-data4" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1"></g><g class=" c3-selected-circles c3-selected-circles-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-data2" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data2 c3-lines c3-lines-data2"></g><g class=" c3-shapes c3-shapes-data2 c3-areas c3-areas-data2"></g><g class=" c3-selected-circles c3-selected-circles-data2"></g><g class=" c3-shapes c3-shapes-data2 c3-circles c3-circles-data2" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-data3" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data3 c3-lines c3-lines-data3"></g><g class=" c3-shapes c3-shapes-data3 c3-areas c3-areas-data3"></g><g class=" c3-selected-circles c3-selected-circles-data3"></g><g class=" c3-shapes c3-shapes-data3 c3-circles c3-circles-data3" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-data4" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data4 c3-lines c3-lines-data4"></g><g class=" c3-shapes c3-shapes-data4 c3-areas c3-areas-data4"></g><g class=" c3-selected-circles c3-selected-circles-data4"></g><g class=" c3-shapes c3-shapes-data4 c3-circles c3-circles-data4" style="cursor: pointer;"></g></g></g><g class="c3-chart-arcs" transform="translate(113,89)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text><g class="c3-chart-arc c3-target c3-target-data1"><g class=" c3-shapes c3-shapes-data1 c3-arcs c3-arcs-data1"><path class=" c3-shape c3-shape c3-arc c3-arc-data1" transform="" style="fill: rgb(28, 51, 83); cursor: pointer;" d="M5.177194343395436e-15,-84.55A84.55,84.55 0 0,1 13.916472608236058,83.39684820270017L0,0Z"></path></g><text dy=".35em" class="" transform="translate(63.129890440123766,-5.231091863126733)" style="opacity: 1; text-anchor: middle; pointer-events: none;">47.4%</text></g><g class="c3-chart-arc c3-target c3-target-data2"><g class=" c3-shapes c3-shapes-data2 c3-arcs c3-arcs-data2"><path class=" c3-shape c3-shape c3-arc c3-arc-data2" transform="" style="fill: rgb(70, 127, 207); cursor: pointer;" d="M13.916472608236058,83.39684820270017A84.55,84.55 0 0,1 -79.63904040818569,-28.395875455131968L0,0Z"></path></g><text dy=".35em" class="" transform="translate(-48.579434569848,40.65446993795834)" style="opacity: 1; text-anchor: middle; pointer-events: none;">33.1%</text></g><g class="c3-chart-arc c3-target c3-target-data3"><g class=" c3-shapes c3-shapes-data3 c3-arcs c3-arcs-data3"><path class=" c3-shape c3-shape c3-arc c3-arc-data3" transform="" style="fill: rgb(126, 165, 221); cursor: pointer;" d="M-45.405285223061064,-71.3236466665332A84.55,84.55 0 0,1 -1.5531583030186305e-14,-84.55L0,0Z"></path></g><text dy=".35em" class="" transform="translate(-17.71614257954589,-60.818464968820955)" style="opacity: 1; text-anchor: middle; pointer-events: none;">9.0%</text></g><g class="c3-chart-arc c3-target c3-target-data4"><g class=" c3-shapes c3-shapes-data4 c3-arcs c3-arcs-data4"><path class=" c3-shape c3-shape c3-arc c3-arc-data4" transform="" style="fill: rgb(200, 217, 241); cursor: pointer;" d="M-79.63904040818569,-28.395875455131968A84.55,84.55 0 0,1 -45.405285223061064,-71.3236466665332L0,0Z"></path></g><text dy=".35em" class="" transform="translate(-49.52609254629045,-39.49574086099379)" style="opacity: 1; text-anchor: middle; pointer-events: none;">10.5%</text></g></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data1"></g></g><g class="c3-chart-text c3-target c3-target-data2" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data2"></g></g><g class="c3-chart-text c3-target c3-target-data3" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data3"></g></g><g class="c3-chart-text c3-target c3-target-data4" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data4"></g></g></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip-xaxis)" transform="translate(0,188)" style="visibility: visible; opacity: 0;"><text class="c3-axis-x-label" transform="" style="text-anchor: end;" x="226" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(113, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H226V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip-yaxis)" transform="translate(0,0)" style="visibility: visible; opacity: 0;"><text class="c3-axis-y-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="1.2em"></text><g class="tick" transform="translate(0,179)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,164)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">15</tspan></text></g><g class="tick" transform="translate(0,148)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,133)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">25</tspan></text></g><g class="tick" transform="translate(0,118)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,103)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">35</tspan></text></g><g class="tick" transform="translate(0,87)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">40</tspan></text></g><g class="tick" transform="translate(0,72)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">45</tspan></text></g><g class="tick" transform="translate(0,57)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">50</tspan></text></g><g class="tick" transform="translate(0,42)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">55</tspan></text></g><g class="tick" transform="translate(0,26)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">60</tspan></text></g><g class="tick" transform="translate(0,11)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">65</tspan></text></g><path class="domain" d="M-6,1H0V188H-6"></path></g><g class="c3-axis c3-axis-y2" transform="translate(226,0)" style="visibility: hidden; opacity: 0;"><text class="c3-axis-y2-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0,188)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,170)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,151)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,132)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,114)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,95)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,76)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,58)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,39)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,20)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V188H6"></path></g></g><g transform="translate(0.5,192.5)" style="visibility: hidden;"><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><rect class="background" x="0" width="226" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423896-clip-xaxis)" style="visibility: hidden; opacity: 0;"><g class="tick" transform="translate(113, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H226V6"></path></g></g><g transform="translate(0,192)" style="visibility: hidden;"></g><text class="c3-title" x="113" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div></div>
            </div>
          </div>
          <script>
            require(['c3', 'jquery'], function(c3, $) {
              $(document).ready(function(){
                var chart = c3.generate({
                  bindto: '#chart-pie', // id of chart wrapper
                  data: {
                    columns: [
                        // each columns data
                      ['data1', 63],
                      ['data2', 44],
                      ['data3', 12],
                      ['data4', 14]
                    ],
                    type: 'pie', // default type of chart
                    colors: {
                      'data1': tabler.colors["blue-darker"],
                      'data2': tabler.colors["blue"],
                      'data3': tabler.colors["blue-light"],
                      'data4': tabler.colors["blue-lighter"]
                    },
                    names: {
                        // name of each serie
                      'data1': 'A',
                      'data2': 'B',
                      'data3': 'C',
                      'data4': 'D'
                    }
                  },
                  axis: {
                  },
                  legend: {
                            show: false, //hide legend
                  },
                  padding: {
                    bottom: 0,
                    top: 0
                  },
                });
              });
            });
          </script>
        </div>
        <div class="col-sm-6">
          <div class="card">
            <div class="card-body text-center">
              <div class="h5">New feedback</div>
              <div class="display-4 font-weight-bold mb-4">62</div>
              <div class="progress progress-sm">
                <div class="progress-bar bg-red" style="width: 28%"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="card">
            <div class="card-body text-center">
              <div class="h5">Today profit</div>
              <div class="display-4 font-weight-bold mb-4">$652</div>
              <div class="progress progress-sm">
                <div class="progress-bar bg-green" style="width: 84%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card p-3">
        <div class="d-flex align-items-center">
          <span class="stamp stamp-md bg-blue mr-3">
            <i class="fe fe-dollar-sign"></i>
          </span>
          <div>
            <h4 class="m-0"><a href="javascript:void(0)">132 <small>Sales</small></a></h4>
            <small class="text-muted">12 waiting payments</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card p-3">
        <div class="d-flex align-items-center">
          <span class="stamp stamp-md bg-green mr-3">
            <i class="fe fe-shopping-cart"></i>
          </span>
          <div>
            <h4 class="m-0"><a href="javascript:void(0)">78 <small>Orders</small></a></h4>
            <small class="text-muted">32 shipped</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card p-3">
        <div class="d-flex align-items-center">
          <span class="stamp stamp-md bg-red mr-3">
            <i class="fe fe-users"></i>
          </span>
          <div>
            <h4 class="m-0"><a href="javascript:void(0)">1,352 <small>Members</small></a></h4>
            <small class="text-muted">163 registered today</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card p-3">
        <div class="d-flex align-items-center">
          <span class="stamp stamp-md bg-yellow mr-3">
            <i class="fe fe-message-square"></i>
          </span>
          <div>
            <h4 class="m-0"><a href="javascript:void(0)">132 <small>Comments</small></a></h4>
            <small class="text-muted">16 waiting</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-cards row-deck">
    <div class="col-lg-6">
      <div class="card card-aside">
        <a href="#" class="card-aside-column"></a>
        <div class="card-body d-flex flex-column">
          <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
          <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
          <div class="d-flex align-items-center pt-5 mt-auto">
            <div class="avatar avatar-md mr-3"></div>
            <div>
              <a href="./profile.html" class="text-default">Rose Bradley</a>
              <small class="d-block text-muted">3 days ago</small>
            </div>
            <div class="ml-auto text-muted">
              <a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card card-aside">
        <a href="#" class="card-aside-column"></a>
        <div class="card-body d-flex flex-column">
          <h4><a href="#">Well, I didn't vote for you.</a></h4>
          <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
          <div class="d-flex align-items-center pt-5 mt-auto">
            <div class="avatar avatar-md mr-3"></div>
            <div>
              <a href="./profile.html" class="text-default">Peter Richards</a>
              <small class="d-block text-muted">3 days ago</small>
            </div>
            <div class="ml-auto text-muted">
              <a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-cards row-deck">
    <div class="col-12">
      <div class="card">
        <div class="table-responsive">
          <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
            <thead>
              <tr>
                <th class="text-center w-1"><i class="icon-people"></i></th>
                <th>User</th>
                <th>Usage</th>
                <th class="text-center">Payment</th>
                <th>Activity</th>
                <th class="text-center">Satisfaction</th>
                <th class="text-center"><i class="icon-settings"></i></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-center">
                  <div class="avatar d-block">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td>
                  <div>Elizabeth Martin</div>
                  <div class="small text-muted">
                    Registered: Mar 19, 2018
                  </div>
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>42%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-yellow" role="progressbar" style="width: 42%" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="payment payment-visa"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <div>4 minutes ago</div>
                </td>
                <td class="text-center">
                  <div class="mx-auto chart-circle chart-circle-xs" data-value="0.42" data-thickness="3" data-color="blue"><canvas width="40" height="40"></canvas>
                    <div class="chart-circle-value">42%</div>
                  </div>
                </td>
                <td class="text-center">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar d-block">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td>
                  <div>Michelle Schultz</div>
                  <div class="small text-muted">
                    Registered: Mar 2, 2018
                  </div>
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>0%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-red" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="payment payment-googlewallet"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <div>5 minutes ago</div>
                </td>
                <td class="text-center">
                  <div class="mx-auto chart-circle chart-circle-xs" data-value="0.0" data-thickness="3" data-color="blue"><canvas width="40" height="40"></canvas>
                    <div class="chart-circle-value">0%</div>
                  </div>
                </td>
                <td class="text-center">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar d-block">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td>
                  <div>Crystal Austin</div>
                  <div class="small text-muted">
                    Registered: Apr 7, 2018
                  </div>
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>96%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-green" role="progressbar" style="width: 96%" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="payment payment-mastercard"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <div>a minute ago</div>
                </td>
                <td class="text-center">
                  <div class="mx-auto chart-circle chart-circle-xs" data-value="0.96" data-thickness="3" data-color="blue"><canvas width="40" height="40"></canvas>
                    <div class="chart-circle-value">96%</div>
                  </div>
                </td>
                <td class="text-center">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar d-block">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td>
                  <div>Douglas Ray</div>
                  <div class="small text-muted">
                    Registered: Jan 15, 2018
                  </div>
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>6%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-red" role="progressbar" style="width: 6%" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="payment payment-shopify"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <div>a minute ago</div>
                </td>
                <td class="text-center">
                  <div class="mx-auto chart-circle chart-circle-xs" data-value="0.06" data-thickness="3" data-color="blue"><canvas width="40" height="40"></canvas>
                    <div class="chart-circle-value">6%</div>
                  </div>
                </td>
                <td class="text-center">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar d-block">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td>
                  <div>Teresa Reyes</div>
                  <div class="small text-muted">
                    Registered: Mar 4, 2018
                  </div>
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>36%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-red" role="progressbar" style="width: 36%" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="payment payment-ebay"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <div>2 minutes ago</div>
                </td>
                <td class="text-center">
                  <div class="mx-auto chart-circle chart-circle-xs" data-value="0.36" data-thickness="3" data-color="blue"><canvas width="40" height="40"></canvas>
                    <div class="chart-circle-value">36%</div>
                  </div>
                </td>
                <td class="text-center">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar d-block">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td>
                  <div>Emma Wade</div>
                  <div class="small text-muted">
                    Registered: Mar 20, 2018
                  </div>
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>7%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-red" role="progressbar" style="width: 7%" aria-valuenow="7" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="payment payment-paypal"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <div>a minute ago</div>
                </td>
                <td class="text-center">
                  <div class="mx-auto chart-circle chart-circle-xs" data-value="0.07" data-thickness="3" data-color="blue"><canvas width="40" height="40"></canvas>
                    <div class="chart-circle-value">7%</div>
                  </div>
                </td>
                <td class="text-center">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar d-block">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td>
                  <div>Carol Henderson</div>
                  <div class="small text-muted">
                    Registered: Feb 22, 2018
                  </div>
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>80%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-green" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="payment payment-visa"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <div>9 minutes ago</div>
                </td>
                <td class="text-center">
                  <div class="mx-auto chart-circle chart-circle-xs" data-value="0.8" data-thickness="3" data-color="blue"><canvas width="40" height="40"></canvas>
                    <div class="chart-circle-value">80%</div>
                  </div>
                </td>
                <td class="text-center">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar d-block">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td>
                  <div>Christopher Harvey</div>
                  <div class="small text-muted">
                    Registered: Jan 22, 2018
                  </div>
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>83%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-green" role="progressbar" style="width: 83%" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="payment payment-googlewallet"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <div>8 minutes ago</div>
                </td>
                <td class="text-center">
                  <div class="mx-auto chart-circle chart-circle-xs" data-value="0.83" data-thickness="3" data-color="blue"><canvas width="40" height="40"></canvas>
                    <div class="chart-circle-value">83%</div>
                  </div>
                </td>
                <td class="text-center">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Browser Stats</h4>
        </div>
        <table class="table card-table">
          <tbody><tr>
            <td width="1"><i class="fa fa-chrome text-muted"></i></td>
            <td>Google Chrome</td>
            <td class="text-right"><span class="text-muted">23%</span></td>
          </tr>
          <tr>
            <td><i class="fa fa-firefox text-muted"></i></td>
            <td>Mozila Firefox</td>
            <td class="text-right"><span class="text-muted">15%</span></td>
          </tr>
          <tr>
            <td><i class="fa fa-safari text-muted"></i></td>
            <td>Apple Safari</td>
            <td class="text-right"><span class="text-muted">7%</span></td>
          </tr>
          <tr>
            <td><i class="fa fa-internet-explorer text-muted"></i></td>
            <td>Internet Explorer</td>
            <td class="text-right"><span class="text-muted">9%</span></td>
          </tr>
          <tr>
            <td><i class="fa fa-opera text-muted"></i></td>
            <td>Opera mini</td>
            <td class="text-right"><span class="text-muted">23%</span></td>
          </tr>
          <tr>
            <td><i class="fa fa-edge text-muted"></i></td>
            <td>Microsoft edge</td>
            <td class="text-right"><span class="text-muted">9%</span></td>
          </tr>
        </tbody></table>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">Projects</h2>
        </div>
        <table class="table card-table">
          <tbody><tr>
            <td>Admin Template</td>
            <td class="text-right">
              <span class="badge badge-default">65%</span>
            </td>
          </tr>
          <tr>
            <td>Landing Page</td>
            <td class="text-right">
              <span class="badge badge-success">Finished</span>
            </td>
          </tr>
          <tr>
            <td>Backend UI</td>
            <td class="text-right">
              <span class="badge badge-danger">Rejected</span>
            </td>
          </tr>
          <tr>
            <td>Personal Blog</td>
            <td class="text-right">
              <span class="badge badge-default">40%</span>
            </td>
          </tr>
          <tr>
            <td>E-mail Templates</td>
            <td class="text-right">
              <span class="badge badge-default">13%</span>
            </td>
          </tr>
          <tr>
            <td>Corporate Website</td>
            <td class="text-right">
              <span class="badge badge-warning">Pending</span>
            </td>
          </tr>
        </tbody></table>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Members</h3>
        </div>
        <div class="card-body o-auto" style="height: 15rem">
          <ul class="list-unstyled list-separated">
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Amanda Hunt</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">amanda_hunt@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Laura Weaver</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">lauraweaver@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Margaret Berry</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">margaret88@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Nancy Herrera</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">nancy_83@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Edward Larson</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">edward90@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Joan Hanson</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">joan.hanson@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-12">
      <div class="row">
        <div class="col-sm-6 col-lg-3">
          <div class="card">
            <div class="card-body">
              <div class="card-value float-right text-blue">+5%</div>
              <h3 class="mb-1">423</h3>
              <div class="text-muted">Users online</div>
            </div>
            <div class="card-chart-bg">
              <div id="chart-bg-users-1" style="height: 100%; max-height: 64px; position: relative;" class="c3"><svg width="274" height="64" style="overflow: hidden;"><defs><clipPath id="c3-1539219423949-clip"><rect width="275" height="62"></rect></clipPath><clipPath id="c3-1539219423949-clip-xaxis"><rect x="-31" y="-20" width="337" height="18"></rect></clipPath><clipPath id="c3-1539219423949-clip-yaxis"><rect x="-29" y="-4" width="19" height="86"></rect></clipPath><clipPath id="c3-1539219423949-clip-grid"><rect width="275" height="62"></rect></clipPath><clipPath id="c3-1539219423949-clip-subchart"><rect width="275"></rect></clipPath></defs><g transform="translate(-0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="137.5" y="31" style="opacity: 0;"></text><rect class="c3-zoom-rect" width="275" height="62" style="opacity: 0;"></rect><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip)" class="c3-regions" style="visibility: visible;"></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip-grid)" class="c3-grid" style="visibility: visible;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="62" style="visibility: hidden;"></line></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip)" class="c3-chart"><g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"><rect class=" c3-event-rect c3-event-rect-0" x="-19.642857142857142" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-1" x="26.357142857142858" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-2" x="72.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-3" x="118.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-4" x="164.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-5" x="210.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-6" x="255.35714285714286" y="0" width="39.285714285714285" height="62"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-data1" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1"><path class=" c3-shape c3-shape c3-line c3-line-data1" d="M0,20.409090909090914L46,6.545454545454548L92,48.13636363636363L138,6.545454545454548L184,45.36363636363637L230,31.5L275,6.545454545454548" style="stroke: rgb(70, 127, 207); opacity: 1;"></path></g><g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1"><path class=" c3-shape c3-shape c3-area c3-area-data1" d="M0,20.409090909090914L46,6.545454545454548L92,48.13636363636363L138,6.545454545454548L184,45.36363636363637L230,31.5L275,6.545454545454548L275,62L230,62L184,62L138,62L92,62L46,62L0,62Z" style="fill: rgb(70, 127, 207); opacity: 0.1;"></path></g><g class=" c3-selected-circles c3-selected-circles-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1" style="cursor: pointer;"><circle class=" c3-shape c3-shape-0 c3-circle c3-circle-0" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="0" cy="20.409090909090914"></circle><circle class=" c3-shape c3-shape-1 c3-circle c3-circle-1" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="46" cy="6.545454545454548"></circle><circle class=" c3-shape c3-shape-2 c3-circle c3-circle-2" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="92" cy="48.13636363636363"></circle><circle class=" c3-shape c3-shape-3 c3-circle c3-circle-3" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="138" cy="6.545454545454548"></circle><circle class=" c3-shape c3-shape-4 c3-circle c3-circle-4" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="184" cy="45.36363636363637"></circle><circle class=" c3-shape c3-shape-5 c3-circle c3-circle-5" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="230" cy="31.5"></circle><circle class=" c3-shape c3-shape-6 c3-circle c3-circle-6" r="2.5" style="fill: rgb(70, 127, 207); opacity: 0;" cx="275" cy="6.545454545454548"></circle></g></g></g><g class="c3-chart-arcs" transform="translate(137.5,26)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data1"></g></g></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip-xaxis)" transform="translate(0,62)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-x-label" transform="" style="text-anchor: end;" x="275" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(46, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(92, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(138, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(184, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(230, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(275, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><path class="domain" d="M0,6V0H275V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip-yaxis)" transform="translate(0,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="1.2em"></text><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,56)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">5</tspan></text></g><g class="tick" transform="translate(0,49)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,42)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">15</tspan></text></g><g class="tick" transform="translate(0,35)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,28)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">25</tspan></text></g><g class="tick" transform="translate(0,21)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">35</tspan></text></g><g class="tick" transform="translate(0,7)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">40</tspan></text></g><path class="domain" d="M0,1H0V62H0"></path></g><g class="c3-axis c3-axis-y2" transform="translate(275,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y2-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,56)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,50)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,44)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,38)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,32)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,26)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,20)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,8)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V62H6"></path></g></g><g transform="translate(-0.5,64.5)" style="visibility: hidden;"><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><rect class="background" x="0" width="275" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219423949-clip-xaxis)" style="visibility: hidden; opacity: 1;"><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(46, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(92, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(138, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(184, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(230, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(275, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><path class="domain" d="M0,6V0H275V6"></path></g></g><g transform="translate(0,64)" style="visibility: hidden;"></g><text class="c3-title" x="137" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div></div>
            </div>
          </div>
          <script>
            require(['c3', 'jquery'], function (c3, $) {
              $(document).ready(function() {
                var chart = c3.generate({
                  bindto: '#chart-bg-users-1',
                  padding: {
                    bottom: -10,
                    left: -1,
                    right: -1
                  },
                  data: {
                    names: {
                      data1: 'Users online'
                    },
                    columns: [
                      ['data1', 30, 40, 10, 40, 12, 22, 40]
                    ],
                    type: 'area'
                  },
                  legend: {
                    show: false
                  },
                  transition: {
                    duration: 0
                  },
                  point: {
                    show: false
                  },
                  tooltip: {
                    format: {
                      title: function (x) {
                        return '';
                      }
                    }
                  },
                  axis: {
                    y: {
                      padding: {
                        bottom: 0,
                      },
                      show: false,
                      tick: {
                        outer: false
                      }
                    },
                    x: {
                      padding: {
                        left: 0,
                        right: 0
                      },
                      show: false
                    }
                  },
                  color: {
                    pattern: ['#467fcf']
                  }
                });
              });
            });
          </script>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card">
            <div class="card-body">
              <div class="card-value float-right text-red">-3%</div>
              <h3 class="mb-1">423</h3>
              <div class="text-muted">Users online</div>
            </div>
            <div class="card-chart-bg">
              <div id="chart-bg-users-2" style="height: 100%; max-height: 64px; position: relative;" class="c3"><svg width="274" height="64" style="overflow: hidden;"><defs><clipPath id="c3-1539219424029-clip"><rect width="275" height="62"></rect></clipPath><clipPath id="c3-1539219424029-clip-xaxis"><rect x="-31" y="-20" width="337" height="18"></rect></clipPath><clipPath id="c3-1539219424029-clip-yaxis"><rect x="-29" y="-4" width="19" height="86"></rect></clipPath><clipPath id="c3-1539219424029-clip-grid"><rect width="275" height="62"></rect></clipPath><clipPath id="c3-1539219424029-clip-subchart"><rect width="275"></rect></clipPath></defs><g transform="translate(-0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="137.5" y="31" style="opacity: 0;"></text><rect class="c3-zoom-rect" width="275" height="62" style="opacity: 0;"></rect><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip)" class="c3-regions" style="visibility: visible;"></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip-grid)" class="c3-grid" style="visibility: visible;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="62" style="visibility: hidden;"></line></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip)" class="c3-chart"><g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"><rect class=" c3-event-rect c3-event-rect-0" x="-19.642857142857142" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-1" x="26.357142857142858" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-2" x="72.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-3" x="118.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-4" x="164.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-5" x="210.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-6" x="255.35714285714286" y="0" width="39.285714285714285" height="62"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-data1" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1"><path class=" c3-shape c3-shape c3-line c3-line-data1" d="M0,20.409090909090914L46,6.545454545454548L92,48.13636363636363L138,6.545454545454548L184,45.36363636363637L230,31.5L275,6.545454545454548" style="stroke: rgb(231, 76, 60); opacity: 1;"></path></g><g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1"><path class=" c3-shape c3-shape c3-area c3-area-data1" d="M0,20.409090909090914L46,6.545454545454548L92,48.13636363636363L138,6.545454545454548L184,45.36363636363637L230,31.5L275,6.545454545454548L275,62L230,62L184,62L138,62L92,62L46,62L0,62Z" style="fill: rgb(231, 76, 60); opacity: 0.1;"></path></g><g class=" c3-selected-circles c3-selected-circles-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1" style="cursor: pointer;"><circle class=" c3-shape c3-shape-0 c3-circle c3-circle-0" r="2.5" style="fill: rgb(231, 76, 60); opacity: 0;" cx="0" cy="20.409090909090914"></circle><circle class=" c3-shape c3-shape-1 c3-circle c3-circle-1" r="2.5" style="fill: rgb(231, 76, 60); opacity: 0;" cx="46" cy="6.545454545454548"></circle><circle class=" c3-shape c3-shape-2 c3-circle c3-circle-2" r="2.5" style="fill: rgb(231, 76, 60); opacity: 0;" cx="92" cy="48.13636363636363"></circle><circle class=" c3-shape c3-shape-3 c3-circle c3-circle-3" r="2.5" style="fill: rgb(231, 76, 60); opacity: 0;" cx="138" cy="6.545454545454548"></circle><circle class=" c3-shape c3-shape-4 c3-circle c3-circle-4" r="2.5" style="fill: rgb(231, 76, 60); opacity: 0;" cx="184" cy="45.36363636363637"></circle><circle class=" c3-shape c3-shape-5 c3-circle c3-circle-5" r="2.5" style="fill: rgb(231, 76, 60); opacity: 0;" cx="230" cy="31.5"></circle><circle class=" c3-shape c3-shape-6 c3-circle c3-circle-6" r="2.5" style="fill: rgb(231, 76, 60); opacity: 0;" cx="275" cy="6.545454545454548"></circle></g></g></g><g class="c3-chart-arcs" transform="translate(137.5,26)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data1"></g></g></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip-xaxis)" transform="translate(0,62)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-x-label" transform="" style="text-anchor: end;" x="275" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(46, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(92, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(138, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(184, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(230, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(275, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><path class="domain" d="M0,6V0H275V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip-yaxis)" transform="translate(0,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="1.2em"></text><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,56)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">5</tspan></text></g><g class="tick" transform="translate(0,49)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,42)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">15</tspan></text></g><g class="tick" transform="translate(0,35)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,28)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">25</tspan></text></g><g class="tick" transform="translate(0,21)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">35</tspan></text></g><g class="tick" transform="translate(0,7)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">40</tspan></text></g><path class="domain" d="M0,1H0V62H0"></path></g><g class="c3-axis c3-axis-y2" transform="translate(275,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y2-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,56)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,50)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,44)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,38)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,32)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,26)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,20)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,8)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V62H6"></path></g></g><g transform="translate(-0.5,64.5)" style="visibility: hidden;"><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><rect class="background" x="0" width="275" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424029-clip-xaxis)" style="visibility: hidden; opacity: 1;"><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(46, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(92, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(138, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(184, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(230, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(275, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><path class="domain" d="M0,6V0H275V6"></path></g></g><g transform="translate(0,64)" style="visibility: hidden;"></g><text class="c3-title" x="137" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div></div>
            </div>
          </div>
          <script>
            require(['c3', 'jquery'], function (c3, $) {
              $(document).ready(function() {
                var chart = c3.generate({
                  bindto: '#chart-bg-users-2',
                  padding: {
                    bottom: -10,
                    left: -1,
                    right: -1
                  },
                  data: {
                    names: {
                      data1: 'Users online'
                    },
                    columns: [
                      ['data1', 30, 40, 10, 40, 12, 22, 40]
                    ],
                    type: 'area'
                  },
                  legend: {
                    show: false
                  },
                  transition: {
                    duration: 0
                  },
                  point: {
                    show: false
                  },
                  tooltip: {
                    format: {
                      title: function (x) {
                        return '';
                      }
                    }
                  },
                  axis: {
                    y: {
                      padding: {
                        bottom: 0,
                      },
                      show: false,
                      tick: {
                        outer: false
                      }
                    },
                    x: {
                      padding: {
                        left: 0,
                        right: 0
                      },
                      show: false
                    }
                  },
                  color: {
                    pattern: ['#e74c3c']
                  }
                });
              });
            });
          </script>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card">
            <div class="card-body">
              <div class="card-value float-right text-green">-3%</div>
              <h3 class="mb-1">423</h3>
              <div class="text-muted">Users online</div>
            </div>
            <div class="card-chart-bg">
              <div id="chart-bg-users-3" style="height: 100%; max-height: 64px; position: relative;" class="c3"><svg width="274" height="64" style="overflow: hidden;"><defs><clipPath id="c3-1539219424079-clip"><rect width="275" height="62"></rect></clipPath><clipPath id="c3-1539219424079-clip-xaxis"><rect x="-31" y="-20" width="337" height="18"></rect></clipPath><clipPath id="c3-1539219424079-clip-yaxis"><rect x="-29" y="-4" width="19" height="86"></rect></clipPath><clipPath id="c3-1539219424079-clip-grid"><rect width="275" height="62"></rect></clipPath><clipPath id="c3-1539219424079-clip-subchart"><rect width="275"></rect></clipPath></defs><g transform="translate(-0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="137.5" y="31" style="opacity: 0;"></text><rect class="c3-zoom-rect" width="275" height="62" style="opacity: 0;"></rect><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip)" class="c3-regions" style="visibility: visible;"></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip-grid)" class="c3-grid" style="visibility: visible;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="62" style="visibility: hidden;"></line></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip)" class="c3-chart"><g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"><rect class=" c3-event-rect c3-event-rect-0" x="-19.642857142857142" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-1" x="26.357142857142858" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-2" x="72.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-3" x="118.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-4" x="164.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-5" x="210.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-6" x="255.35714285714286" y="0" width="39.285714285714285" height="62"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-data1" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1"><path class=" c3-shape c3-shape c3-line c3-line-data1" d="M0,20.409090909090914L46,6.545454545454548L92,48.13636363636363L138,6.545454545454548L184,45.36363636363637L230,31.5L275,6.545454545454548" style="stroke: rgb(94, 186, 0); opacity: 1;"></path></g><g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1"><path class=" c3-shape c3-shape c3-area c3-area-data1" d="M0,20.409090909090914L46,6.545454545454548L92,48.13636363636363L138,6.545454545454548L184,45.36363636363637L230,31.5L275,6.545454545454548L275,62L230,62L184,62L138,62L92,62L46,62L0,62Z" style="fill: rgb(94, 186, 0); opacity: 0.1;"></path></g><g class=" c3-selected-circles c3-selected-circles-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1" style="cursor: pointer;"><circle class=" c3-shape c3-shape-0 c3-circle c3-circle-0" r="2.5" style="fill: rgb(94, 186, 0); opacity: 0;" cx="0" cy="20.409090909090914"></circle><circle class=" c3-shape c3-shape-1 c3-circle c3-circle-1" r="2.5" style="fill: rgb(94, 186, 0); opacity: 0;" cx="46" cy="6.545454545454548"></circle><circle class=" c3-shape c3-shape-2 c3-circle c3-circle-2" r="2.5" style="fill: rgb(94, 186, 0); opacity: 0;" cx="92" cy="48.13636363636363"></circle><circle class=" c3-shape c3-shape-3 c3-circle c3-circle-3" r="2.5" style="fill: rgb(94, 186, 0); opacity: 0;" cx="138" cy="6.545454545454548"></circle><circle class=" c3-shape c3-shape-4 c3-circle c3-circle-4" r="2.5" style="fill: rgb(94, 186, 0); opacity: 0;" cx="184" cy="45.36363636363637"></circle><circle class=" c3-shape c3-shape-5 c3-circle c3-circle-5" r="2.5" style="fill: rgb(94, 186, 0); opacity: 0;" cx="230" cy="31.5"></circle><circle class=" c3-shape c3-shape-6 c3-circle c3-circle-6" r="2.5" style="fill: rgb(94, 186, 0); opacity: 0;" cx="275" cy="6.545454545454548"></circle></g></g></g><g class="c3-chart-arcs" transform="translate(137.5,26)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data1"></g></g></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip-xaxis)" transform="translate(0,62)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-x-label" transform="" style="text-anchor: end;" x="275" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(46, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(92, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(138, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(184, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(230, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(275, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><path class="domain" d="M0,6V0H275V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip-yaxis)" transform="translate(0,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="1.2em"></text><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,56)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">5</tspan></text></g><g class="tick" transform="translate(0,49)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,42)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">15</tspan></text></g><g class="tick" transform="translate(0,35)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,28)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">25</tspan></text></g><g class="tick" transform="translate(0,21)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">35</tspan></text></g><g class="tick" transform="translate(0,7)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">40</tspan></text></g><path class="domain" d="M0,1H0V62H0"></path></g><g class="c3-axis c3-axis-y2" transform="translate(275,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y2-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,56)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,50)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,44)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,38)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,32)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,26)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,20)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,8)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V62H6"></path></g></g><g transform="translate(-0.5,64.5)" style="visibility: hidden;"><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><rect class="background" x="0" width="275" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424079-clip-xaxis)" style="visibility: hidden; opacity: 1;"><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(46, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(92, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(138, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(184, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(230, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(275, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><path class="domain" d="M0,6V0H275V6"></path></g></g><g transform="translate(0,64)" style="visibility: hidden;"></g><text class="c3-title" x="137" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div></div>
            </div>
          </div>
          <script>
            require(['c3', 'jquery'], function (c3, $) {
              $(document).ready(function() {
                var chart = c3.generate({
                  bindto: '#chart-bg-users-3',
                  padding: {
                    bottom: -10,
                    left: -1,
                    right: -1
                  },
                  data: {
                    names: {
                      data1: 'Users online'
                    },
                    columns: [
                      ['data1', 30, 40, 10, 40, 12, 22, 40]
                    ],
                    type: 'area'
                  },
                  legend: {
                    show: false
                  },
                  transition: {
                    duration: 0
                  },
                  point: {
                    show: false
                  },
                  tooltip: {
                    format: {
                      title: function (x) {
                        return '';
                      }
                    }
                  },
                  axis: {
                    y: {
                      padding: {
                        bottom: 0,
                      },
                      show: false,
                      tick: {
                        outer: false
                      }
                    },
                    x: {
                      padding: {
                        left: 0,
                        right: 0
                      },
                      show: false
                    }
                  },
                  color: {
                    pattern: ['#5eba00']
                  }
                });
              });
            });
          </script>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card">
            <div class="card-body">
              <div class="card-value float-right text-yellow">9%</div>
              <h3 class="mb-1">423</h3>
              <div class="text-muted">Users online</div>
            </div>
            <div class="card-chart-bg">
              <div id="chart-bg-users-4" style="height: 100%; max-height: 64px; position: relative;" class="c3"><svg width="274" height="64" style="overflow: hidden;"><defs><clipPath id="c3-1539219424131-clip"><rect width="275" height="62"></rect></clipPath><clipPath id="c3-1539219424131-clip-xaxis"><rect x="-31" y="-20" width="337" height="18"></rect></clipPath><clipPath id="c3-1539219424131-clip-yaxis"><rect x="-29" y="-4" width="19" height="86"></rect></clipPath><clipPath id="c3-1539219424131-clip-grid"><rect width="275" height="62"></rect></clipPath><clipPath id="c3-1539219424131-clip-subchart"><rect width="275"></rect></clipPath></defs><g transform="translate(-0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="137.5" y="31" style="opacity: 0;"></text><rect class="c3-zoom-rect" width="275" height="62" style="opacity: 0;"></rect><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip)" class="c3-regions" style="visibility: visible;"></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip-grid)" class="c3-grid" style="visibility: visible;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="62" style="visibility: hidden;"></line></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip)" class="c3-chart"><g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"><rect class=" c3-event-rect c3-event-rect-0" x="-19.642857142857142" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-1" x="26.357142857142858" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-2" x="72.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-3" x="118.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-4" x="164.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-5" x="210.35714285714286" y="0" width="39.285714285714285" height="62"></rect><rect class=" c3-event-rect c3-event-rect-6" x="255.35714285714286" y="0" width="39.285714285714285" height="62"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-data1" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1"><path class=" c3-shape c3-shape c3-line c3-line-data1" d="M0,20.409090909090914L46,6.545454545454548L92,48.13636363636363L138,6.545454545454548L184,45.36363636363637L230,31.5L275,6.545454545454548" style="stroke: rgb(241, 196, 15); opacity: 1;"></path></g><g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1"><path class=" c3-shape c3-shape c3-area c3-area-data1" d="M0,20.409090909090914L46,6.545454545454548L92,48.13636363636363L138,6.545454545454548L184,45.36363636363637L230,31.5L275,6.545454545454548L275,62L230,62L184,62L138,62L92,62L46,62L0,62Z" style="fill: rgb(241, 196, 15); opacity: 0.1;"></path></g><g class=" c3-selected-circles c3-selected-circles-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1" style="cursor: pointer;"><circle class=" c3-shape c3-shape-0 c3-circle c3-circle-0" r="2.5" style="fill: rgb(241, 196, 15); opacity: 0;" cx="0" cy="20.409090909090914"></circle><circle class=" c3-shape c3-shape-1 c3-circle c3-circle-1" r="2.5" style="fill: rgb(241, 196, 15); opacity: 0;" cx="46" cy="6.545454545454548"></circle><circle class=" c3-shape c3-shape-2 c3-circle c3-circle-2" r="2.5" style="fill: rgb(241, 196, 15); opacity: 0;" cx="92" cy="48.13636363636363"></circle><circle class=" c3-shape c3-shape-3 c3-circle c3-circle-3" r="2.5" style="fill: rgb(241, 196, 15); opacity: 0;" cx="138" cy="6.545454545454548"></circle><circle class=" c3-shape c3-shape-4 c3-circle c3-circle-4" r="2.5" style="fill: rgb(241, 196, 15); opacity: 0;" cx="184" cy="45.36363636363637"></circle><circle class=" c3-shape c3-shape-5 c3-circle c3-circle-5" r="2.5" style="fill: rgb(241, 196, 15); opacity: 0;" cx="230" cy="31.5"></circle><circle class=" c3-shape c3-shape-6 c3-circle c3-circle-6" r="2.5" style="fill: rgb(241, 196, 15); opacity: 0;" cx="275" cy="6.545454545454548"></circle></g></g></g><g class="c3-chart-arcs" transform="translate(137.5,26)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data1"></g></g></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip-xaxis)" transform="translate(0,62)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-x-label" transform="" style="text-anchor: end;" x="275" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(46, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(92, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(138, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(184, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(230, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(275, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><path class="domain" d="M0,6V0H275V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip-yaxis)" transform="translate(0,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="1.2em"></text><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,56)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">5</tspan></text></g><g class="tick" transform="translate(0,49)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,42)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">15</tspan></text></g><g class="tick" transform="translate(0,35)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,28)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">25</tspan></text></g><g class="tick" transform="translate(0,21)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">35</tspan></text></g><g class="tick" transform="translate(0,7)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">40</tspan></text></g><path class="domain" d="M0,1H0V62H0"></path></g><g class="c3-axis c3-axis-y2" transform="translate(275,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y2-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="-0.5em"></text><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,56)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,50)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,44)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,38)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,32)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,26)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,20)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,8)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V62H6"></path></g></g><g transform="translate(-0.5,64.5)" style="visibility: hidden;"><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><rect class="background" x="0" width="275" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(https://tabler.github.io/tabler/index.html#c3-1539219424131-clip-xaxis)" style="visibility: hidden; opacity: 1;"><g class="tick" transform="translate(0, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" transform="translate(46, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" transform="translate(92, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" transform="translate(138, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" transform="translate(184, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" transform="translate(230, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><g class="tick" transform="translate(275, 0)" style="opacity: 1;"><line x1="0" x2="0" y2="0"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">6</tspan></text></g><path class="domain" d="M0,6V0H275V6"></path></g></g><g transform="translate(0,64)" style="visibility: hidden;"></g><text class="c3-title" x="137" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div></div>
            </div>
          </div>
          <script>
            require(['c3', 'jquery'], function (c3, $) {
              $(document).ready(function() {
                var chart = c3.generate({
                  bindto: '#chart-bg-users-4',
                  padding: {
                    bottom: -10,
                    left: -1,
                    right: -1
                  },
                  data: {
                    names: {
                      data1: 'Users online'
                    },
                    columns: [
                      ['data1', 30, 40, 10, 40, 12, 22, 40]
                    ],
                    type: 'area'
                  },
                  legend: {
                    show: false
                  },
                  transition: {
                    duration: 0
                  },
                  point: {
                    show: false
                  },
                  tooltip: {
                    format: {
                      title: function (x) {
                        return '';
                      }
                    }
                  },
                  axis: {
                    y: {
                      padding: {
                        bottom: 0,
                      },
                      show: false,
                      tick: {
                        outer: false
                      }
                    },
                    x: {
                      padding: {
                        left: 0,
                        right: 0
                      },
                      show: false
                    }
                  },
                  color: {
                    pattern: ['#f1c40f']
                  }
                });
              });
            });
          </script>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Invoices</h3>
        </div>
        <div class="table-responsive">
          <table class="table card-table table-vcenter text-nowrap">
            <thead>
              <tr>
                <th class="w-1">No.</th>
                <th>Invoice Subject</th>
                <th>Client</th>
                <th>VAT No.</th>
                <th>Created</th>
                <th>Status</th>
                <th>Price</th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="text-muted">001401</span></td>
                <td><a href="invoice.html" class="text-inherit">Design Works</a></td>
                <td>
                  Carlson Limited
                </td>
                <td>
                  87956621
                </td>
                <td>
                  15 Dec 2017
                </td>
                <td>
                  <span class="status-icon bg-success"></span> Paid
                </td>
                <td>$887</td>
                <td class="text-right">
                  <a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
                  <div class="dropdown">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
                  </div>
                </td>
                <td>
                  <a class="icon" href="javascript:void(0)">
                    <i class="fe fe-edit"></i>
                  </a>
                </td>
              </tr>
              <tr>
                <td><span class="text-muted">001402</span></td>
                <td><a href="invoice.html" class="text-inherit">UX Wireframes</a></td>
                <td>
                  Adobe
                </td>
                <td>
                  87956421
                </td>
                <td>
                  12 Apr 2017
                </td>
                <td>
                  <span class="status-icon bg-warning"></span> Pending
                </td>
                <td>$1200</td>
                <td class="text-right">
                  <a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
                  <div class="dropdown">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
                  </div>
                </td>
                <td>
                  <a class="icon" href="javascript:void(0)">
                    <i class="fe fe-edit"></i>
                  </a>
                </td>
              </tr>
              <tr>
                <td><span class="text-muted">001403</span></td>
                <td><a href="invoice.html" class="text-inherit">New Dashboard</a></td>
                <td>
                  Bluewolf
                </td>
                <td>
                  87952621
                </td>
                <td>
                  23 Oct 2017
                </td>
                <td>
                  <span class="status-icon bg-warning"></span> Pending
                </td>
                <td>$534</td>
                <td class="text-right">
                  <a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
                  <div class="dropdown">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
                  </div>
                </td>
                <td>
                  <a class="icon" href="javascript:void(0)">
                    <i class="fe fe-edit"></i>
                  </a>
                </td>
              </tr>
              <tr>
                <td><span class="text-muted">001404</span></td>
                <td><a href="invoice.html" class="text-inherit">Landing Page</a></td>
                <td>
                  Salesforce
                </td>
                <td>
                  87953421
                </td>
                <td>
                  2 Sep 2017
                </td>
                <td>
                  <span class="status-icon bg-secondary"></span> Due in 2 Weeks
                </td>
                <td>$1500</td>
                <td class="text-right">
                  <a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
                  <div class="dropdown">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
                  </div>
                </td>
                <td>
                  <a class="icon" href="javascript:void(0)">
                    <i class="fe fe-edit"></i>
                  </a>
                </td>
              </tr>
              <tr>
                <td><span class="text-muted">001405</span></td>
                <td><a href="invoice.html" class="text-inherit">Marketing Templates</a></td>
                <td>
                  Printic
                </td>
                <td>
                  87956621
                </td>
                <td>
                  29 Jan 2018
                </td>
                <td>
                  <span class="status-icon bg-danger"></span> Paid Today
                </td>
                <td>$648</td>
                <td class="text-right">
                  <a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
                  <div class="dropdown">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
                  </div>
                </td>
                <td>
                  <a class="icon" href="javascript:void(0)">
                    <i class="fe fe-edit"></i>
                  </a>
                </td>
              </tr>
              <tr>
                <td><span class="text-muted">001406</span></td>
                <td><a href="invoice.html" class="text-inherit">Sales Presentation</a></td>
                <td>
                  Tabdaq
                </td>
                <td>
                  87956621
                </td>
                <td>
                  4 Feb 2018
                </td>
                <td>
                  <span class="status-icon bg-secondary"></span> Due in 3 Weeks
                </td>
                <td>$300</td>
                <td class="text-right">
                  <a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
                  <div class="dropdown">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
                  </div>
                </td>
                <td>
                  <a class="icon" href="javascript:void(0)">
                    <i class="fe fe-edit"></i>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>